import QtQuick 2.0

Rectangle
{
    id: actionPanel;
    color: "#727272";
    radius: 8;
    width: 440;
    height: 100;
    z: 4;
    anchors.horizontalCenter: parent.horizontalCenter;
    anchors.bottom: parent.bottom;
    anchors.bottomMargin: 8;

    Rectangle
    {
        id: title;
        color: "#404040";
        x: 0;
        y: 0;
        width: parent.width;
        height: 40;
        radius: 8;
        Text
        {
            id: imagePath;
            anchors.left: parent.left;
            anchors.right: parent.right;
            anchors.margins: 8;
            anchors.verticalCenter: parent.verticalCenter;
            font.pointSize: 10;
            color: "white";
            elide: Text.ElideLeft;
        }
    }
    Row
    {
        anchors.margins: 4;
        anchors.top: title.bottom;
        anchors.left: parent.left;
        anchors.right: parent.right;
        anchors.bottom: parent.bottom;
        spacing: 4;
        FlatButton
        {
            iconSource: "icons/ic_archive.png";
            width: 50;
            height: 50;
            onClicked: fileDialog.open();
        }
        FlatButton
        {
            iconSource: "icons/ic_back.png";
            width: 50;
            height: 50;
            onClicked: root.back();
        }
        FlatButton
        {
            iconSource: "icons/ic_zoomin.png";
            width: 50;
            height: 50;
            onClicked:
            {
                var factor = imageViewer.scale;
                if (factor < 1)
                {
                    imageViewer.scale = factor + 0.25;
                }
                else if (factor < 16)
                {
                    imageViewer.scale = factor + 1;
                }
            }
        }
        FlatButton
        {
            iconSource: "icons/ic_zoomout.png";
            width: 50;
            height: 50;
            onClicked:
            {
                var factor = imageViewer.scale;
                if (factor > 1)
                {
                    imageViewer.scale = factor - 1;
                }
                else if (factor > 0.25)
                {
                    imageViewer.scale = factor - 0.25;
                }
            }
        }
        FlatButton
        {
            iconSource: "icons/ic_backward.png";
            width: 50;
            height: 50;
            onClicked: root.prev();
        }
        FlatButton
        {
            iconSource: "icons/ic_forward.png";
            width: 50;
            height: 50;
            onClicked: root.next();
        }
        FlatButton
        {
            iconSource: "icons/ic_rotate_left.png";
            width: 50;
            height: 50;
            onClicked: imageViewer.rotation -= 90;
        }
        FlatButton
        {
            iconSource: "icons/ic_rotate_right.png";
            width: 50;
            height: 50;
            onClicked: imageViewer.rotation += 90;
        }
    }

    states: [
        State
        {
            name: "hide";
            PropertyChanges
            {
                target: actionPanel;
                restoreEntryValues: false;
                opacity: 0;
            }
        },
        State
        {
            name: "show";
            PropertyChanges
            {
                target: actionPanel;
                restoreEntryValues: false;
                opacity: 1;
                visible: true;
            }
        }
    ]
    state: "hide";
    transitions: [
        Transition {
            from: "hide";
            to: "show";
            NumberAnimation {
                property: "opacity";
                duration: 800;
            }
        },
        Transition {
            from: "show";
            to: "hide";
            SequentialAnimation {
                NumberAnimation {
                    property: "opacity";
                    duration: 800;
                }
                PropertyAction {
                    property: "visible";
                    value: false;
                }
            }
        }
    ]
}

